﻿<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <link href="../../dms/bootstrap.min.css" rel="stylesheet" />
    <style>
        .StaffInfo{padding:5px;background-color:#eee;height:60px;}
        .echartContent{
            width:400px;height:400px;padding:30px;border:1px solid #eee;
        }
        .tdHeader{padding:6px;font-weight:bold;}
        .mytable{}
        .mytable td{text-align:center;}
          html, body, #main {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body style="height: 100%; margin: 0">
    <div class="container">
        <div class="StaffInfo"></div>
        <div class="row">
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="tdHeader">Skill matrlx & competencies</div>
                <div id="container" class="echartContent"></div>
            </div>
            <div class="col-lg-1 col-md-1 col-sm-12">

            </div>
            <div class="col-lg-7 col-md-5 col-sm-12">
                <div class="tdHeader"> Project experience | 8  FY19</div>
                <div>
                    <table class="table mytable" style="width:300px;">
                        <tr>
                            <td>DM<br /><span>Compeleted</span></td>
                            <td><span class="glyphicon glyphicon-heart"></span><br /><span>5</span></td>
                            <td><span class="glyphicon glyphicon-star"></span><br /><span>5</span></td>
                            <td><span class="glyphicon glyphicon-thumbs-up"></span><br /><span>5</span></td>
                            <td><span class="glyphicon glyphicon-ok-sign"></span><br /><span>5</span></td>
                            <td><span class="glyphicon glyphicon-user"></span><br /><span>5</span></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id='main'></div>


    <script src="https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts.min.js"></script>
    <script src="echarts-wordcloud.js"></script>
    <script src="jquery-2.2.1.min.js"></script>
    <script type="text/javascript">
     function initChat() {
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;
            option = {

                tooltip: {
                    //trigger: 'axis'
                },

                radar: [
                    {
                        indicator: [
                            { text: '品牌 3.8', max: 100 },
                            { text: '内容', max: 100 },
                            { text: '可用性', max: 100 },
                            { text: '功能', max: 100 },
                            { text: '张欧川子', max: 100 }
                        ],
                        center: ['50%', '40%'],
                        radius: 90,
                        axisLine: {            // 坐标轴线
                            show: false        // 默认显示，属性show控制显示与否
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            show: false,
                            textStyle: {
                                color: '#ff0000' // 坐标轴刻度文字的样式
                            },
                            backgroundColor: {
                                image: 'http://booking.fjyclound.cn/files/upload/zhangouchuangzi.jpg'
                                // 这里可以是图片的 URL，
                                // 或者图片的 dataURI，
                                // 或者 HTMLImageElement 对象，
                                // 或者 HTMLCanvasElement 对象。
                            }
                        },
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: ["#ffffff"]  // 图表背景网格的颜色
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: '#0000ff' // 图表背景网格线的颜色
                            }
                        }
                    }
                ],
                series: [
                    {
                        type: 'radar',
                        tooltip: {
                            trigger: 'item'
                        },
                        itemStyle: { normal: { areaStyle: { type: 'default' } } },
                        data: [
                            {
                                value: [60, 73, 85, 40, 90],
                                name: '某软件'
                            }
                        ]
                    }
                ]
            };
            ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }
     
     function initChat_cloud() {

     }

        $(function () {
            initChat();
        });

    </script>
    <script>
            var chart = echarts.init(document.getElementById('main'));
            var colorList = [];
            var finalDataList = [];
            colorList.push("#b13f02", "#be291a", "#b93147", "#8b1b1b", "#521e1b", "#625b47", "#de804d", "#e96e61", "#e47487", "#be6262", "#8f6562", "#9d9786", "#99999b", "#e39267", "#ec8378", "#e88898", "#c87979", "#a07b79", "#aba698", "#a7a8aa");
            var datas = [
            {
                name: 'Basketball',
                value: 10000,
            }, {
                name: 'Football',
                value: 6181
            }, {
                name: 'Volleyball',
                value: 4386
            }, {
                name: 'Marathon running',
                value: 4055
            }, {
                name: 'Skiing',
                value: 2467
            }, {
                name: 'Tennis',
                value: 2244
            }, {
                name: 'Cycling',
                value: 1898
            }, {
                name: 'Swimming',
                value: 1484
            }, {
                name: 'Baseball',
                value: 1112
            }];
            var option = {
                backgroundColor: '#fff',
                tooltip: {
                    show: false
                },
                title: {
                    left: 'center',
                    top: 0
                },
                series: [{
                    type: 'wordCloud',
                    gridSize: 1,
                    sizeRange: [15, 44],
                    rotationRange: [0, 0],                   
                    textStyle: {
                        normal: {
                            color: function (params) {
                                return colorList[Math.round(Math.random() * (colorList.length - 1))];
                            },
                            backgroundColor: 'rgba(0,0,0,0)',
                        }
                    },
                    left: 'center',
                    top: 'center',
                    width: '96%',
                    height: '100%',
                    right: null,
                    bottom: null,
                    data: datas
                }]
            };
            chart.setOption(option);
    </script>
</body>
</html>